<template>
  <!-- 公告管理 -->
  <div class="dashboard-container">
    <SearchTable :show-pagination="false">
      <template slot="header">
        <!-- <el-row style="width: 100%">
          <el-input
            style="width: 300px"
            @input="searchKeyWord"
            clearable
            placeholder="请输入用户名搜索关键词"
            v-model="keyWord"
          ></el-input>
        </el-row> -->
        <el-button type="primary" @click="addStore">公告录入</el-button>
      </template>
      <template>
        <el-table :data="tableData" height="675" border style="width: 100%">
          <el-table-column type="index" label="序号" align="center" width="60">
          </el-table-column>
          <el-table-column prop="content" label="公告内容" align="center">
          </el-table-column>
          <el-table-column prop="image_url" label="公告图片" align="center">
            <template v-slot="{ row }">
              <img class="img-box" :src="row.image_url" alt="" />
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" width="180">
            <template v-slot="{ row }">
              <div class="link-list">
                <!-- <el-link :underline="false" type="primary" @click="edit(row)"
                  >编辑公告</el-link
                > -->
                <el-link
                  :underline="false"
                  type="danger"
                  @click="deleteNotice(row)"
                  >删除公告</el-link
                >
              </div>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </SearchTable>

    <!-- 公告录入弹框 -->
    <AddDialog
      :storeData="storeForm"
      :title="title"
      v-if="addVisible"
      :visible.sync="addVisible"
      @confirm="addStoreConfirm"
    ></AddDialog>

    <!-- 展示图片 -->
    <el-dialog
      width="50%"
      v-if="imgDialogVisible && imgDialogData.length > 0"
      :visible.sync="imgDialogVisible"
    >
      <img
        v-for="(item, index) in imgDialogData"
        :key="index"
        width="100%"
        :src="item"
        alt=""
      />
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import SearchTable from "@/components/TableTemplate/SearchTable";
import { getNotice, deleteNotice } from "@/api/noval.js";
import AddDialog from "./components/AddDialog";
export default {
  name: "Dashboard",
  components: {
    SearchTable,
    AddDialog,
  },
  data() {
    return {
      tableData: [],
      originTableData: [],
      addVisible: false,
      title: "公告录入",
      storeForm: {},
      imgDialogVisible: false,
      imgDialogData: [],
      keyWord: "",
      timer: null,
    };
  },
  mounted() {
    this.getNotice();
  },
  computed: {
    ...mapGetters(["name"]),
  },
  methods: {
    //删除公告
    async deleteNotice(row) {
      const res = await deleteNotice(row.id);
      res.status == 0
        ? this.$message.success(res.message)
        : this.$message.error(res.message);
      this.getNotice();
    },
    showImgDialog(storeImg) {
      this.imgDialogVisible = true;
      this.imgDialogData = storeImg;
    },
    async getNotice() {
      const { data: res } = await getNotice();
      this.tableData = res || [];
      this.originTableData = res || [];
    },
    searchKeyWord(keyWord) {
      if (this.timer) {
        clearTimeout(this.timer);
      }
      this.timer = setTimeout(() => {
        //这里setTimeout用来防抖，也就是500ms内一直在输入，就会清除上次的定时器，就不会一直搜索，等输入完了之后才真正执行一次搜索，优化

        //先复原
        this.tableData = this.originTableData;
        //再过滤
        let arr = [];
        this.tableData.map((item) => {
          if (item.username.indexOf(keyWord) !== -1) {
            arr.push(item);
          }
        });
        this.tableData = arr;
      }, 500);
    },
    addStore() {
      this.title = "公告录入";
      this.addVisible = true;
      this.storeForm = {};
    },
    edit(row) {
      this.title = "编辑公告";
      this.addVisible = true;
      this.storeForm = row;
    },
    addStoreConfirm() {
      //刷新列表
      this.getNotice();
    },
  },
};
</script>

<style lang="scss" scoped>
.dashboard-container {
  width: 100%;
  height: 100%;
}
.link-list {
  .el-link {
    margin: 0 2px;
  }
}
.img-box {
  display: inline-block;
  width: 100px;
  height: 100px;
}
</style>
